<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent label-width="80px" label-position="left">
          <el-col :span="8">
            <el-form-item label="客户名称">
        <el-select v-model="listQuery.fsiteNo" :disabled="this.$store.state.user.fsiteLevel==3" clearable filterable placeholder="请选择客户名称">
            <el-option
              v-for="item in fsiteNoBelongOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
      </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="elMonth" label="库存月份">
          <el-date-picker
            v-model="listQuery.fmonthTemp"
            type="month"
            placeholder="请选择库存月份"
          ></el-date-picker>
        </el-form-item>
          </el-col>
          <template v-if="showAll">
            <el-col :span="8">
              <el-form-item label="仓库名称">
          <el-select
            v-model="listQuery.fstockno"
            class="filter-item"
            clearable
            placeholder="选择仓库名称"
          >
            <el-option
              v-for="item in fstocknoOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="物料名称">
          <el-input v-model="listQuery.fgoodname" placeholder="输入物料名称"/>
        </el-form-item>
            </el-col>
          </template>
          <el-col :span="8">
            <el-form-item>
          <el-button
            type="primary"
            @click="handleFilter"
            >查找</el-button
          >
          <el-button type="text" icon="el-icon-arrow-down" @click="showAll=true"
                v-if="!showAll">展开</el-button>
              <el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>
                收起</el-button>
        </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
       <JNPF-table
      v-loading="listLoading"
      :data="list"
    >
      <el-table-column
        align="center"
        label="操作"
        class-name="small-padding"
        prop="foperator"
        :width="buttonColor.operationOne"
      >
        <template slot-scope="scope">
          <el-button type="text"  @click="detailDialog(scope.row)">明细</el-button>
        </template>
      </el-table-column>
      <el-table-column
        :width="buttonColor.line"
        :index="indexMethod"
        align="center"
        label="序号"
        type="index"
      />
       <el-table-column align="left" label="月份" prop="fmonth" />
      <el-table-column :width="buttonColor.name" align="left" label="仓库名称" prop="fstockname" />
      <el-table-column :width="buttonColor.billno" align="left" label="物料编号" prop="fgoodno" />
      <el-table-column align="left" label="物料名称" width="95" prop="fgoodname" />
      <el-table-column align="left" label="规格" prop="fspec" />
      <el-table-column align="left" label="订货单位" prop="fordunit" />
      <el-table-column align="center" label="期初" prop="fbegqty" />
      <el-table-column align="center" label="入库" prop="frecqty" />
      <el-table-column align="center" label="出库" prop="fretqty"/>
      <el-table-column align="center" label="调拨" prop="fmovqty" />
      <el-table-column align="center" label="领出" prop="foutqty" />
      <el-table-column align="center" label="退回" prop="finqty" />
      <el-table-column align="center" label="损溢" prop="fmrkqty" />
      <el-table-column align="center" label="期末" prop="fbalqty" />
      <el-table-column align="center" label="库存" prop="repertory" />
    </JNPF-table>
    <paginations
	:total="0"
	:page.sync="listQuery.currentPage"
	:limit.sync="listQuery.pageSize"
	/>
      </div>
    </div>
    <el-dialog  :close-on-click-modal="false"
    :title="textMap[dialogStatus]"
    :fullscreen="true"
     :visible.sync="dialogFormVisible">
      <el-tabs type="border-card">
      <el-tab-pane label="头表" :style="{height:screenHeight-230+'px'}">
        <el-row class="JNPF-common-search-box" :gutter="16">
          <el-form ref="dataForm" :rules="rules" :model="dataForm" @submit.native.prevent label-width="80px" label-position="left">
            <el-col :span="6">
              <el-form-item label="库存月份">
          <el-input
            disabled
            v-model="detailQueryList.fmonth"
            clearable
            placeholder="暂无库存月份"
          />
        </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="仓库名称">
          <el-input
            disabled
            v-model="detailQueryList.fstockname"
            clearable
            placeholder="暂无仓库名称"
          />
        </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="物料编号">
          <el-input
            disabled
            v-model="detailQueryList.fgoodno"
            clearable
            placeholder="暂无物料编号"
          />
        </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="物料名称">
          <el-input
            disabled
            v-model="detailQueryList.fgoodname"
            clearable
            placeholder="暂无物料名称"
          />
        </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="物料规格">
          <el-input
            disabled
            v-model="detailQueryList.fspec"
            clearable
            placeholder="暂无物料规格"
          />
        </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="物料单位">
          <el-input
            disabled
            v-model="detailQueryList.fordunit"
            clearable
            placeholder="暂无物料单位"
          />
        </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-tab-pane>
        <el-tab-pane label="明细表">
        <JNPF-table
          v-loading="listLoading"
          :height="screenHeight-230"
          :data="dialogList"
        >
          <el-table-column
        :index="indexMethodDetail"
        align="center"
        label="序"
        type="index" prop="time" />
        <el-table-column align="center" label="业务类型" prop="fbizname" />
        <el-table-column width="160" align="center" label="单据编号" prop="fbizno" />
        <el-table-column align="center" label="业务日期" prop="fbizdate" />
        <el-table-column align="center" label="数量(+)" prop="f1" />
        <el-table-column align="center" label="数量(-)" prop="f2" />
        <el-table-column align="center" label="备注" prop="fmemo" />
        </JNPF-table>
      </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
import { getListArea, fsiteOptionsByLevel } from "@/api/area";
import {
  listgoodInv,
  listDetail
} from "@/api/goodInv";
import {tableColor, titleColor, buttonColor } from "@/filters/index";
import Pagination from "@/components/Pagination";
import Material from '@/components/Material'
import moment from "moment";
export default {
  name: "ITcGoodInv",
  components: { Pagination,Material},
  data() {
    return {
      fsiteNoBelongOptions: [], // 客户列表
      dialogList: [],
      rowid:0,
       showAll:false,
       screenHeight: document.body.clientHeight,
      dialogLoading: false,
      detailVisible: false,
      detailQueryList: {
        fmonth: undefined,
        fstockno: undefined,
        fstockname: undefined,
        fgoodno: undefined,
        fgoodname: undefined,
        fordunit: undefined,
        fspec: undefined,
      },
      list: null,
      fstocknoOptions: [],
      total: 0,
      materialIdVisible: false,
      materialFsiteNo: null,
      tableColor,
      buttonColor,
      titleColor,
      listQuery: {
        page: 1,
        limit: 20,
        fsiteNo: this.$store.state.user.fsiteNo,
        fstockno: undefined,
        fstockname: undefined,
        fgoodno: undefined,
        fgoodname: undefined,
        fspec: undefined,
        fordunit: undefined,
        fbegqty: undefined,
        frecqty: undefined,
        fretqty: undefined,
        fmovqty: undefined,
        foutqty: undefined,
        finqty: undefined,
        fmrkqty: undefined,
        fbalqty: undefined,
        fupddate: undefined,
        fmonth: undefined,
        fmonthTemp: new Date(),
        sort: "create_time",
        order: "desc",
      },
      dataForm: {
        fstockno: undefined,
        fstockname: undefined,
        fgoodno: undefined,
        fgoodname: undefined,
        fspec: undefined,
        fordunit: undefined,
        fbegqty: undefined,
        frecqty: undefined,
        fretqty: undefined,
        fmovqty: undefined,
        foutqty: undefined,
        finqty: undefined,
        fmonth:undefined,
        fmrkqty: undefined,
        fbalqty: undefined,
      },
      dataForm1: {
        fstockno: undefined,
        fstockname: undefined,
        fgoodno: undefined,
        fgoodname: undefined,
        fspec: undefined,
        fordunit: undefined,
        fbegqty: undefined,
        frecqty: undefined,
        fretqty: undefined,
        fmovqty: undefined,
        foutqty: undefined,
        finqty: undefined,
        fmonth:undefined,
        fmrkqty: undefined,
        fbalqty: undefined,
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "创建",
      },
      rules: {
        fstockno: [{ required: true, message: "仓库名称不能为空" }],
        fgoodno: [{ required: true, message: "物料编号不能为空" }],
        fmonth: [{ required: true, message: "请选择日期" }],
      },
    };
  },
  created() {
    this.getList();
    // 客户列表
    fsiteOptionsByLevel(3)
      .then(response => {
        this.fsiteNoBelongOptions = response.data.data.list
      })
      .catch(() => {
        this.fsiteNoBelongOptions = []
      })
    // 仓库名称
    getListArea({ flag: 30, arg1: this.$store.state.user.fsiteNo })
      .then((response) => {
        this.fstocknoOptions = response.data.data.list;
      })
      .catch(() => {
        this.fstocknoOptions = [];
      });
  },
  methods: {
    datetimeFormat(row, column) {
      const date = row[column.property];
      if (date === undefined || date === null) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    //获取列表
    getList() {
      this.listLoading = true;
      this.listQuery.fmonth = moment(this.listQuery.fmonthTemp).format("YYYYMM")
      if(this.listQuery.fmonth == 'Invalid date'){
        this.listQuery.fmonth = ''
      }
      listgoodInv(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
          this.listQuery.fupddate=undefined
         for(var i = 0 ; i < this.list.length ; i++)
         {
           this.list[i]['fmonth'] = this.list[i]['fmonth'].substr(0,4)+'-'+this.list[i]['fmonth'].substr(4,5)
         }
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    //查找
    handleFilter() {
      this.listQuery.page = 1;
      if(this.listQuery.fmonth == undefined)
      {
         this.listQuery.fmonth = new Date
      }
      this.getList();
    },

    resetForm() {
      this.dataForm = {
        fstockno: undefined,
        fstockname: undefined,
        fgoodno: undefined,
        fgoodname: undefined,
        fspec: undefined,
        fordunit: undefined,
        fbegqty: undefined,
        frecqty: undefined,
        fretqty: undefined,
        fmovqty: undefined,
        foutqty: undefined,
        finqty: undefined,
        fmrkqty: undefined,
        fbalqty: undefined,
        details: [],
      };
    },
    handleCreate() {
      // this.resetForm();
      // this.dialogStatus = "create";
      // this.dialogFormVisible = true;
      // this.$nextTick(() => {
      //   this.$refs["dataForm"].clearValidate();
      // });
       this.$confirm('功能开发中', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
    },
    // 获取详细数据
    detailDialog(row) {
       this.dialogLoading = true;
      const temp = {
        fmonth: row.fmonth,
        fstockno:row.fstockno,
        fgoodno:row.fgoodno,
        fsiteNo: this.$store.state.user.fsiteNo,
      }
      listDetail(temp)
      .then((response) => {
        this.dialogList = response.data.data.list;
        this.dialogLoading = false;
        this.dialogFormVisible=true;
      })
      .catch(() => {
        this.dialogList = [];
        this.dialogLoading = false;
      });

      this.dialogLoading = true;
      this.detailQueryList.fmonth = row.fmonth
      this.detailQueryList.fstockno = row.fstockno
      this.detailQueryList.fstockname = row.fstockname
      this.detailQueryList.fgoodno = row.fgoodno
      this.detailQueryList.fgoodname = row.fgoodname
      this.detailQueryList.fordunit = row.fordunit
      this.detailQueryList.fspec = row.fspec
      this.detailVisible = true;
    },

      // 物料弹出框
    searchDialogMaterial() {
      this.materialIdVisible = true
      this.materialFsiteNo = this.dataForm.fsiteNo
    },

     // 物料弹出框
    materialDialogValue(value){
        this.dataForm1.fgoodno = value.data.fgoodno
        this.dataForm1.fgoodname = value.data.fgoodname
        this.dataForm1.fbuyprice = value.data.fbuyprice
        this.fbuypriceData = value.data.fbuyprice
        this.dataForm1.fspec = value.data.fspec
        this.dataForm1.funit = value.data.funit
        this.dataForm1.fordunit = value.data.fordunit
    },

    //取消弹框
    cancel() {
      this.dialogFormVisible = false;
      this.dataForm = {
        fstockname: undefined,
        fstockno: undefined,
        fgoodno: undefined,
        fbegqty: undefined,
        frecqty: undefined,
        fretqty: undefined,
        fmovqty: undefined,
        foutqty: undefined,
        finqty: undefined,
        fbillno: undefined,
        fuseqty: undefined,
        fmrkqty: undefined,
        fbalqty: undefined,
        id: undefined,
      };
    },
    indexMethod(index) {
      index = index + 1;
      return index;
    },
    indexMethodDetail(index) {
      index = index + 1;
      return index;
    },
  },
};
</script>